{% extends 'html/all.html' %}
{% block title %}
    搜索结果
{% endblock %}
{% block content %}
    <div class="container my-4">
        <h1 class="mb-4">搜索结果</h1>
        <div class="row row-cols-1 row-cols-md-3 g-4" id="productRow">
        </div>
        <!-- 分页条 -->
        <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination">
            </ul>
        </nav>
    </div>
{% endblock %}
{% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var searchText = "{{ searchText }}";
            var selectedCategory = "{{ selectedCategory }}";
            var currentPage = 1;

            function loadPage(page) {
                $.ajax({
                    url: '/api/show_select',
                    type: 'GET',
                    data: {
                        searchText: searchText,
                        selectedCategory: selectedCategory,
                        page: page
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            var productRow = $('#productRow');
                            productRow.empty();
                            response.data.forEach((item) => {
                                productRow.append(
                                    `<div class="col">
                                    <div class="card">
                                        <img alt="产品图片" class="card-img-top" src="${item.ImageURL}"/>
                                        <div class="card-body">
                                            <h5 class="card-title">${item.ProductName}</h5>
                                            <p class="card-text">${item.Description}</p>
                                            <p class="card-text">${item.Price}￥</p>
                                            <p class="card-text">卖家：${item.username}</p>
                                            <a class="btn btn-primary" href="#">查看详情</a>
                                        </div>
                                    </div>
                                </div>`
                                );
                            });
                            currentPage = page;
                            updatePagination();
                        } else {
                            console.error('加载产品失败:', response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX 请求失败:', error);
                    }
                });
            }

            function updatePagination() {
                var pagination = $('#pagination');
                pagination.empty();
                for (var i = 1; i <= 5; i++) {  // 假设总共有5页
                    var li = $('<li class="page-item"></li>');
                    if (i === currentPage) {
                        li.addClass('active');
                    }
                    var a = $('<a class="page-link" href="#"></a>').text(i);
                    a.click(function (e) {
                        e.preventDefault();
                        loadPage(parseInt($(this).text()));
                    });
                    li.append(a);
                    pagination.append(li);
                }
            }

            loadPage(1);
        });
    </script>
{% endblock %}